<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
    <title>修改用户信息</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        body{
            background-color: #F3F5F7;
        }
        table{
            text-align:center;
            margin:10px auto;
            width:700px;
            border:2px solid #4DBAA3;
        }
        .sty {
            width:146px;
            height:30px;

        }
        td{
            border: 2px solid #4DBAA3;
        }
        input{
            border: none;
        }
        textarea{
            border: none;
            resize:none;
        }
        .btn{
            position: absolute;
            bottom: 20px;
            right: 80px;
        }
        .imghead{
            width: 100%;
            margin: 30px 0;
        }
        .layui-upload-list{
            margin:0 auto;
            width:80px;
            height:80px;
            border-radius:50%;
            overflow:hidden;
        }
        .layui-upload-list > a > img{
            width: 100%;
            height: 100%;
        }
        .div_head > p{
            margin: 5px 472px;
        }
        textarea{
            border: 1px solid #EEEEEE;
            width: 80.9%;
            height: 100%;
        }
    </style>
</head>
<body>
<div>
    <div class="layui-row imghead">
        <div id="idv">
            <div class="div_head">
                <div class="layui-upload" id="div_up">
                    <div class="layui-upload-list">
                       <a href="javascript:;" id="test1">
                           <img src="" id="avatarUrl" width="80px"/>
                       </a>
                    </div>
                </div>
                <p>用户头像</p>
            </div>
        </div>
    </div>
    <form class="layui-form" action="">
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户昵称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="nickname" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">用户账号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="account" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">用户学号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userCode" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label">学习时长</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" name="studyDate" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">身份证号码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="idCard" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sex" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>

                    <label class="layui-form-label">注册时间</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" id="createDate" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <label class="layui-form-label">个性签名</label>
            <textarea cols="90" id="freestyle" rows="2">在这里输入内容...</textarea>
        </div>
        <div class="btn">
        <button lay-submit lay-filter="formDemo" type="button" class="layui-btn layui-btn-normal">提交</button>
        <button onclick="cancel()" class="layui-btn layui-btn-warm">取消</button>
    </div>
        <input type="hidden" name="userId"/>
    </form>
</div>
</body>
<script>
    var form;
    var $;
    var table;
    var layer;
    var upload;
    var laydate;
    layui.use(['laydate','form','jquery','table','layer','upload'],function() {
        form = layui.form;
        laydate = layui.laydate;
        $ = layui.jquery;
        table = layui.table;
        layer = layui.layer;
        upload = layui.upload;
        //提交
        form.on('submit(formDemo)', function(data){
            data.field.freestyle = $('#freestyle').val();
            if(data.field.sex == '男'){
                data.field.sex = 1;
            }else if(data.field.sex == '女'){
                data.field.sex = 2;
            }else{
                data.field.sex = 0;
            }
            delete data.field.studyDate;
            $.ajax({
               url:'/UserList/updateBeforeUser',
               data:data.field,
               dataType:'json',
               success:function (data) {
                   if(data.data){
                       var layer = parent.layer;
                       layer.close(layer.index);
                       layer.msg("编辑成功");
                   }else{
                       layer.msg("编辑失败");
                   }
               }
            });
            return false;
        });

        //上传头像
        upload.render({
            elem: '#test1',
            url: '/Upload/upload',
            accept: 'file',
            field:'file',
           /* bindAction:'#subUpload',
            auto:false,*/
            size: 1000,
            multiple: true,
            number: 9,
            done: function(res){
                $.ajax({
                    url:'/UserList/updateBeforeUser',
                    data:{"avatarUrl":res.data,"userId":$('input[name = userId]').val()},
                    dataType:'json',
                    success:function (data) {
                        if(data.data){
                            $('#avatarUrl').attr('src',res.data);
                            layer.msg("更换成功");
                        }else{
                            layer.msg("更换失败");
                        }
                    }
                });
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

    $.ajax({
        url:'/UserList/queryBeforeUser',
        dataType:'json',
        data:{"userId":$('input[name = userId]',window.parent.document).val()},
        success:function (data) {
            data = data.data[0];
            $('input[name = userId]').val($('input[name = userId]',window.parent.document).val());
            $('input[name = account]').val(data.account);
            $('input[name = nickname]').val(data.nickname);
            $('input[name = userCode]').val(data.userCode);
            $('input[name = studyDate]').val(data.studyDate+"分钟 (不可更改)");
            $('input[name = phone]').val(data.phone);
            $('input[name = idCard]').val(data.idCard);
            if(data.sex == 1){
                data.sex = "男";
            }else if(data.sex == 2){
                data.sex = "女";
            }else{
                data.sex = "保密";
            }
            $('input[name = sex]').val(data.sex);
            $('input[name = email]').val(data.email);
            $('#createDate').val(data.createDate + "(不可修改)");
            $('#freestyle').val(data.freestyle);
            $('#avatarUrl').attr('src',data.avatarUrl);
        }
    });

    function cancel() {
        var layer = parent.layer;
        layer.close(layer.index);
    }


</script>
</html>